<template>
	<view>
		<nav-bar fontColor="#FFFFFF" title="产品详情"></nav-bar>
		<view class="topBgColor">
			<view class="topTitle">
				<!-- <view class="jiantou">
					<image src="../../../static/icon/left.png"></image>
				</view> -->
				<span>{{form.productName}}</span>
				
			</view>
			<view style="display: flex;margin-left: 30rpx;">
				<view class="tag1">低利率</view>
				<view class="tag2">低门槛</view>
				<view class="tag1">放款快</view>
			</view>
		</view>
		<view class="addressBox">
			<view style="font-size: 25rpx;height: 80rpx;line-height: 110rpx;">最高可申请额度</view>
			<view
				style="color: #ef1a1a;font-weight: bold;width: 100%;height: 120rpx;margin: 0 auto;display: flex;justify-content: center;border-bottom: 1px solid #ededed;">
				<view style="font-size: 30rpx;line-height: 130rpx;">￥</view>
				<view style="font-size: 80rpx;line-height: 100rpx;">{{form.finLoanProduct.creditLineUpto}}</view>
				<view style="color: #000000;line-height: 130rpx;margin-left: 10rpx;font-size: 25rpx;color: #ef1a1a;">万</view>
			</view>
			<view style="width: 100%;display: flex;justify-content: space-around;">
				<view style="width: 50%;height: 150rpx;">
					<view style="margin: 25rpx 0 10rpx 0;">
						<span style="font-size: 40rpx;color: #000000;">{{form.finLoanProduct.paybackNumbers}}</span>
						<span style="font-size: 25rpx;">个月</span>
					</view>
					<view style="font-size: 25rpx;">期限最长</view>
				</view>
				<!-- <view
					style="position: absolute; right: 50%;height: 50rpx;width: 1rpx;background: #a5a5a5;margin-top: 50rpx;">
				</view>
				<view style="width: 50%;">
					<view style="margin: 25rpx 0 10rpx 0;">
						<span style="font-size: 40rpx;color: #000000;">{{form.montlyRate}}</span>
						<span style="font-size: 25rpx;">%</span>
					</view>
					<view style="font-size: 25rpx;">月利率可低至</view>
				</view> -->
			</view>
		</view>
		<view class="centerBox">
			<view class="centerBoxtitle">产品说明</view>
			<view class="centerBoxDetail" v-if="form.productName == '酒易贷'">企业注册时间1年以上;法定代表人年龄:60周岁以下;代理年限:代理核心企业产品6个月以上;企业及法人征信情况良好</view>
			<view class="centerBoxDetail" v-else>企业注册时间1年以上;法定代表人年龄:65周岁以下;代理年限:代理核心企业产品1年以上;企业及法人征信情况良好</view>
			<view class="centerBoxtitle">融资流程</view>
			<view class="centerBoxDetail">1步融资，系统</view>
			<uni-card title="1" :isFull="true" sub-title="线上申请" thumbnail="/static/icon/lock.png"></uni-card>
			<view class="centerBoxtitle top">常见问题</view>
			<uni-card style="margin-top: 20rpx;" v-for="item in askList" :title="item.title" :isFull="true" :sub-title="item.sub"
				thumbnail="/static/icon/ask.png">
			</uni-card>
		</view>
		<view style="height: 120rpx;">
			<view class="bottomBox">
				<view class="buttonBox">
					<button class="button_fix" size="default" @click="launch">开通产品</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				askList:[
					{
						title:'还款方式',
						sub: '随借随还'
					},
					{
						title:'融资主体',
						sub: '企业/个体工商户'
					},
					{
						title:'产品特点',
						sub: '线上审批，通过率高'
					}
				],
				title: '',
				form: {}
			}
		},
		onLoad(e) {
			this.form = JSON.parse(e.id)
		},
		methods: {
			launch() {
				let formData = JSON.stringify(this.form)
				uni.navigateTo({
					url: '/pages/product/launch-product?id='+formData
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.flex {
		display: flex;
	}
	.tag {
		color: dodgerblue;
		background: #FFFFFF;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		background: #b5e3ff;
		position: absolute;
		right: 5%;
		margin-top: 30rpx;
	
	}
	
	.tag1 {
		color: #00d900;
		background: #FFFFFF;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		margin: 20rpx 10rpx;
	}
	
	.tag2 {
		color: #e8d609;
		background: #FFFFFF;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 25px;
		font-size: 25rpx;
		line-height: 50rpx;
		margin: 20rpx 10rpx;
	}
	.topBgColor {
		width: 100%;
		height: 400rpx;
		background-image: linear-gradient(to right, #495aff 0%, #0acffe 100%);
	}

	.topTitle {
		display: flex;
		height: 100rpx;
		padding: 20rpx;

		span {
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: bold;
			line-height: 100rpx;
			margin-left: 20rpx;
		}

		image {
			height: 40rpx;
			width: 40rpx;

		}

		.jiantou {
			line-height: 120rpx;
		}

	}

	.addressBox {
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 15rpx;
		// margin-top: 100rpx;
		position: absolute;
		height: 350rpx;
		top: 14%;
		left: 2.5%;
		margin-top: 60rpx;
		text-align: center;
	}

	.centerBox {
		width: 95%;
		margin: 0 auto;
		margin-top: 200rpx;
		.centerBoxtitle {
			font-size: 35rpx;
			color: #000000;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.centerBoxDetail {
			color: #a5a5a5;
			font-size: 28rpx;
			letter-spacing: 2rpx;
			margin: 20rpx 0;
		}

		.top {
			margin: 70rpx 0;
		}
	}

	.bottomBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		margin-bottom: 20rpx;
		z-index: 1000;
	}

	.buttonBox {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;

		// margin-top: 200rpx;
	}

	.button_fix {
		width: 90%;
		height: 70rpx;
		// margin: 0 auto;
		color: #FFFFFF;
		background: #2749C8;
		font-weight: bold;
		letter-spacing: 5rpx;
		font-size: 28rpx;
		line-height: 70rpx;

	}
</style>